<template>
	<!-- 加载失败蒙层 -->
	<view class="loading" v-if="status">
		<view class="loading_body">
			<view class="loading_body_icon"></view>
			<view class="loading_body_name">
				{{err ? errMsg:'设备加载中'}}
			</view>
			<view class="loading_body_message" v-if="err">
				即将返回首页
			</view>
			<view class="loading_body_message" v-else>
				{{msg}}
				<!-- 请触摸指纹激活水杯 {{loading.remainder}}s -->
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	let props = defineProps({
		message: String,
	})
	let msg = ref(props.message)
	let status = ref(true)
	let err = ref(false)
	let errMsg = ref("加载失败")

	watch(() => props.message, (newVal) => {
		msg.value = newVal;
	})

	const close = () => {
		status.value = false
	}

	const open = () => {
		status.value = true
	}
	
	const error = (msg) => {
		status.value = true
		err.value = true
		errMsg.value = msg
	}
	
	defineExpose({
		close,
		open,
		error
	})
	
</script>

<style lang="scss" scoped>
	.loading {
		backdrop-filter: blur(20rpx);
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 100;

		&_body {
			margin-top: 50%;
			text-align: center;



			&_icon {
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
				margin: 20rpx auto 100rpx;
				position: relative;
			}

			&_name {
				font-size: 36rpx;
				font-weight: bold;
			}

			&_message {
				font-size: 28rpx;
				color: #999;
				margin-top: 10rpx;
			}

			&_error {
				font-size: 28rpx;
				color: #aaa;
				margin-top: 20rpx;
			}
		}

		.loading_body_icon:before,
		.loading_body_icon:after {
			content: "";
			position: absolute;
			top: 0;
			color: var(--color);
			background-color: currentColor;
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 50%;
			transition: all 1s;
			-webkit-animation: pulse 3s ease-out infinite;
			animation: pulse 3s ease-out infinite;
		}

		.loading_body_icon:after {
			-webkit-animation-delay: 0.4s;
			animation-delay: 0.4s;
			-webkit-animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
			animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
		}

		@keyframes pulse {
			0% {
				transform: scale(0);
				color: var(--color);
			}

			75%,
			100% {
				transform: scale(3);
				color: transparent;
			}
		}

		@keyframes pulseColor {

			50%,
			90% {
				color: var(--color);
			}

			70% {
				color: var(--color);
			}
		}
	}
</style>